<template>
    <div class="main">
        <div class="tabar">
            问题
            <div class="switch">
                <div class="switch-item" @click="handChangeIssus(0)">所有的问题
                    <span>{{ allIssusList.length }}</span>
                    <div class="line" v-if="showType == 0"></div>
                </div>
                <div class="switch-item" @click="handChangeIssus(1)">回顾的问题
                    <span>{{ reviewList.length }}</span>
                    <div class="line" v-if="showType == 1"></div>
                </div>
                <div class="switch-item" @click="handChangeIssus(2)">忽略的问题
                    <span>{{ ignorList.length }}</span>
                    <div class="line" v-if="showType == 2"></div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="item" v-for="(item, index) in showList" @click="handToIssusDetail(item)">
                <span></span>
                {{ item.issusName }}
                <div class="tag-contanier">
                    <div class="isNew">
                        New Issue
                    </div>
                    <div class="project-name">
                        {{ item.protectType }}
                    </div>
                    <div class="time">
                        <i class="el-icon-stopwatch"></i>
                        19min | 2mos
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getIssusByTeamAndType, SearchIssus } from '../api/HomeApi';

export default {
    data() {
        return {
            // 問題列表
            showType: 0,
            showList: [],
            allIssusList: [],
            reviewList: [],
            ignorList: [],
            teamId: localStorage.getItem('userTeamId')
        }
    },
    async created() {
        await this.getIssus(this.teamId, 0)
        await this.getIssus(this.teamId, 1)
        await this.getIssus(this.teamId, 2)
        setTimeout(() => {
            this.showList = this.allIssusList
            console.log(this.showList, 'this.showList');
            console.log(this.allIssusList, ' this.allIssusList');
        }, 400)
    },
    mounted() {
    },
    methods: {
        handChangeIssus(type) {
            if (type == 0) {
                this.showList = this.allIssusList
                this.showType = type
            }
            if (type == 1) {
                this.showList = this.reviewList
                this.showType = type
            }
            if (type == 2) {
                this.showList = this.ignorList
                this.showType = type
            }

        },
        getIssus(teamId, type) {
            let data = {
                teamId,
                type,
            }
            getIssusByTeamAndType(data).then(res => {
                console.log(res, '55555555');
                if (type === 0) this.allIssusList = res.data
                if (type === 1) this.reviewList = res.data
                if (type === 2) this.ignorList = res.data
            })
        },
        handToIssusDetail(item) {
            this.$router.push({
                path: '/issusDetail',
                query: item
            })
        },
        seach(keyWord) {
            console.log(keyWord, 'data');
            const data = {
                keyWord,
            }
            SearchIssus(data).then(res => {
                console.log(res);
                if(res.data.length === 0) {
                    this.$message.error('没有匹配到关键字')
                }else {
                    this.showList = res.data
                }
            })
        }
    }
}
</script>

<style scoped>
.main {
    height: 100%;
    overflow: scroll;
    border: 1px solid #E4E7ED;
    background: #F5F5F5;
    border-radius: 10px;
}

.tabar {
    padding: 10px 20px;
    border-bottom: 1px solid #DCDCDC;
    font-size: 15px;
}

.switch {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.switch-item span {
    background: #C0C4CC;
    display: inline-block;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    text-align: center;
}

.content {
    height: 100%;
    width: 100%
}

.item {
    color: #409EFF;
    padding: 8px 10px;
    border-bottom: 2px solid #e2e8f5;
}

.item:hover {
    cursor: pointer;
}

.item span {
    display: inline-block;
    margin-left: -10px;
    height: 15px;
    width: 8px;
    margin-right: 5px;
    background: #f07523;
    font-weight: 100;
    font: bold;
    border-radius: 0px 3px 3px 0px;
}

.tag-contanier {
    display: flex;
    margin-top: 4px;
    padding-left: 8px;
    align-items: center;
}

.isNew {
    font-size: 12px;
    background: #f3be6d;
    border-radius: 5px;
    margin-right: 10px;
    color: #606266;
    padding: 4px;
}

.project-name {
    color: #E6A23C;
    font-size: 12px;
    background: #DCDFE6;
    border-radius: 5px;
    padding: 4px;
    margin-right: 10px;
}

.time {
    color: #606266;
    font-size: 12px;
}

.switch-item:hover {
    cursor: pointer;
}

.line {
    height: 3px;
    width: 100%;
    background: #6947e4;
    margin-bottom: -10px;
    margin-top: 5px;
}
</style>